<template>
  <div class="home">
    <SwipePage :images="images" />
    <GridPage :merchantType="merchantType" />
    <div class="HomeActive" @click="goToGouka">
      <img src="@/assets/gouka.png" alt="" />
    </div>
    <van-list
      v-if="show"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ProductList title="优质好货" :prosList="prosList" />
    </van-list>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import SwipePage from "@/components/SwipePage.vue";
import GridPage from "@/components/GridPage.vue";
import HomeActive from "@/components/HomeActive.vue";
import ProductList from "@/components/ProductList.vue";

import { List, Toast } from "vant";
Vue.use(List);
@Component({
  components: {
    SwipePage,
    GridPage,
    HomeActive,
    ProductList,
  },
})
export default class Home extends Vue {
  private images: string[] = [require("@/assets/img/banner.png")];
  private show = false;
  private grade: number = 0;
  private form = {
    lat: "",
    lon: "",
    mid: 0,
    online: 1,
    order: 0,
    page: 1,
    size: 20,
  };
  private prosList = [];
  private loading: boolean = false;
  private finished: boolean = false;
  private merchantType: any[] = [];

  private mounted() {
    this.$common.getAuthToken(this.getData);
  }
  private getData() {
    this.$post(`merchantType`, this.form).then((res: any) => {
      if (res.code == 0) {
        var result = [];
        for (var i = 0; i < res.data.length; i += 16) {
          result.push(res.data.slice(i, i + 16));
        }
        this.merchantType = result;
        this.show = true;
      }
    });
    this.$post(`userInfo`, this.form).then((res: any) => {
      if (res.code == 0) {
        this.grade = res.data.grade;
      }
    });
  }
  private onLoad(): void {
    this.$post(`pros`, this.form).then((res: any) => {
      if (res.code == 0) {
        this.loading = false;
        this.prosList = this.prosList.concat(res.data.list);
        this.form.page += 1;
        if (res.data.list.length < 20) {
          this.finished = true;
        }
      }
    });
  }
  private goToGouka() {
    if (this.grade == 0) {
      Toast.fail("普通用户无法购卡");
    } else {
      this.$router.push("/merchantDetails/0");
    }
  }
}
</script>
<style lang="scss" scoped>
.HomeActive {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  & > img {
    width: 100%;
    max-height: 300px;
    display: block;
  }
}
</style>
